<template>
    <div class="box">
        <div class="fff">
            <van-icon name="arrow-left" @click="onMy()" />
        <div class="title">我的喜欢</div>
        </div>
        
        <div class="likes" >
            <!-- <p>{{ likeVideos }}</p> -->
            <video  muted controls :src="like.url" v-for="like in likeVideos" :key="like.id"></video>
            <p>{{ likeVideos.pid }}</p>
            
        </div>
        
    </div>
</template>

<script>
import {getLikeVideo} from '@/request'
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Rate } from 'vant';
import { Toast } from 'vant';
import { Icon } from 'vant';
import { getcookie } from '@/utils/cookie';

Vue.use(Icon);
Vue.use(Toast)
Vue.use(Rate);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data () {
        return {
            likeVideos: [],
            
           
            
        }
    },
    created() {
        getLikeVideo().then(data=>{
            this.likeVideos = data
            console.log( this.likeVideos)
        })

    },
    updated() {
       
    },
    methods: {
       onMy(){
        this.$router.push('/my')
       }
    }
}
</script>

<style scoped>
    .box{
        padding: 0 20px 0 10px;
    }
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 100vh;
    }
    video{
        height: 100vh;
        width: 100%;
    }
    .van-icon{
       font-size: 30px;
       margin: 10px;
       color: black;
    }
    .likes{
       width:100%;
       height: 200px;
     
    }
    video{
        width: 100%;
       
    }
    .title{
       margin:0 auto;
       margin-bottom: 10px;
        width: 80%;
        font-size: 30px;
        text-align: center;
        font-family:cursive;
        font-weight: bold;
        color: red;
        background-color: #ccc;
    }
    
</style>
